<template>
  <div>
    <div class="box" :style="daflay?'padding-left: 20px':'padding-left: 52px'">
       <div class="blaek" v-if="loding"></div>
      <div class="top_box">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          style="margin-left: 30px"
          active-background-color="#fff"
          @select="handleSelect"
          :router="true"
        >
          <el-menu-item index="/centre/platform">数据概况</el-menu-item>
          <el-menu-item index="/centre/platformO">测评</el-menu-item>
          <el-menu-item index="/centre/platformT">咨询</el-menu-item>
          <el-menu-item index="/centre/platformS">直播</el-menu-item>
          <el-menu-item index="/centre/platformF">倾诉</el-menu-item>
          <el-menu-item index="/centre/platformV">训练营</el-menu-item>
          <el-menu-item index="/centre/platformX">课程</el-menu-item>
          <el-menu-item index="/centre/platformW">冥想馆</el-menu-item>
          <el-menu-item index="/centre/platformA">心理之窗</el-menu-item>
        </el-menu>
        <div class="top_in">
          <div class="insj">
            <el-checkbox
              v-model="checked1"
              @change="inp1()"
              style="margin-right: 10px"
              >时间范围</el-checkbox
            ><t-date-range-picker
              :disabled="flay"
              v-model="riqi"
              :disable-date="{
                before: dayjs().subtract(90, 'day').format(),
                after: dayjs().add(0, 'day').format(),
              }"
            />
          </div>
          <div class="ingj">
            <el-checkbox v-model="checked2" @change="inp1()"
              >高级条件</el-checkbox
            >
          </div>
          <div class="ingj">
            <el-select
              v-model="value1"
              @change="inputcli()"
              placeholder="按天分析"
              :disabled="!flay"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="value2"
              :disabled="!flay"
              @change="inputc"
              placeholder="按天分析"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- <div class="ingj">
            组织架构：
            <el-select v-model="value3" placeholder="按天分析">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div> -->
          <div class="btn">
            <el-button @click="cz()">重置</el-button>
            <el-button type="primary" @click="cx()">查询</el-button>
          </div>
        </div>
      </div>
      <div class="zhuyao">
        <div class="til">关键指标</div>
        <div class="tilbox">
          <div class="tiitem">
            {{ zlzl }} <br />
            <span class="niuw"> 总浏览量(PV)</span>
          </div>
          <div class="tiitem">
            {{ fwrs }} <br />
            <span class="niuw"> 访问人数(PV)</span>
          </div>
          
        </div>
        <!-- <div class="til" style="margin-top: 20px">测评统计</div>
        <div class="boxtj">
          <div class="zijibox" v-for="(item, index) in acsi" :key="index">
            <div class="kaoney" style="margin-top: 30px">{{ item.snum }}</div>
            <div class="dhwid">{{ item.name }}</div>
            <div class="xx"><span style="color:red">♥</span><span style="color:#000;font-size:16px; font-weight: bold;">16</span> </div>
          </div>
          <div class="zijibox1" @click="zhankai()" v-if="(dataarrq.length-1)>6" >{{ stazt }}</div>
        </div> -->
      </div>
      <div class="zhuyao">
        <div class="til each_title">
          关键指标
          <!-- <el-select v-model="value4" placeholder="按天分析">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </div>
        <div class="eca">
          <div id="chart_zhe"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import * as echarts from "echarts";
import { chart_13 } from "../../../echats/Current.js";
import { getplat, getplatlist } from "../../../api/platapi.js";
import dayjs from 'dayjs';
let loding=ref(true)
const activeIndex = ref("/centre/platformS");
const value1 = ref(0);
const value2 = ref("2");
const value3 = ref(0);
const value4 = ref("近7天");
let checked2 = ref(true);
let checked1 = ref(false);
let Echart_1 = ref(null);
let zlzl = ref(0);
let riqi = ref([]);
let fwrs = ref(0);
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
const options = [
  {
    value: 0,
    label: "按天分析",
  },
  {
    value: 1,
    label: "按月度",
  },
  {
    value: 2,
    label: "按季度",
  },
  {
    value: 3,
    label: "按年度",
  },
];
let options1 = ref([
  {
    value: "1",
    label: "近7天",
  },
  {
    value: "2",
    label: "近30天",
  },
  {
    value: "3",
    label: "近90天",
  },
]);
let flay = ref(true);
const options2 = [
  {
    value: 0,
    label: "集团公司",
  },
  {
    value: 1,
    label: "子/分公司",
  },
  {
    value: 2,
    label: "部门",
  },
];
const options3 = [
  {
    value: "近7天",
    label: "近7天",
  },
  {
    value: "近30天",
    label: "近30天",
  },
];
const inputcli = () => {
  if (value1.value === 0) {
    options1.value = [
      {
        value: "1",
        label: "近7天",
      },
      {
        value: "2",
        label: "近30天",
      },
      {
        value: "3",
        label: "近90天",
      },
    ];
    value2.value = "2";
  } else if (value1.value === 1) {
    options1.value = [
      {
        value: "4",
        label: "近6个月",
      },
      {
        value: "5",
        label: "近12个月",
      },
    ];
    value2.value = "4";
  } else if (value1.value === 2) {
    options1.value = [
      {
        value: "6",
        label: "近一个季度",
      },
      {
        value: "7",
        label: "近两个季度",
      },
      {
        value: "8",
        label: "近三个季度",
      },
      {
        value: "9",
        label: "近四个季度",
      },
    ];
    value2.value = "6";
  } else {
    options1.value = [
      {
        value: "10",
        label: "近一年",
      },
      {
        value: "11",
        label: "近两年",
      },
    ];
    value2.value = "10";
  }
};
const inp1 = () => {
  flay.value = !flay.value;
  if (flay.value) {
    checked1.value = false;
    checked2.value = true;
  } else {
    checked1.value = true;
    checked2.value = false;
  }
};
const inputc = (ev) => {
  value2.value = ev;
};
const riqijs = () => {
  // 获取今天的时间
  const today = new Date();

  // 获取未来第30天的时间
  const futureDate = new Date();
  futureDate.setDate(today.getDate() - 30);

  // 将时间格式化为字符串
  const todayStr = today.toISOString().slice(0, 10);
  const futureDateStr = futureDate.toISOString().slice(0, 10);
  // 输出结果
  riqi.value = [futureDateStr, todayStr];
};
let cp = ref(0);
let sc = ref(0);
let acsi = ref([]);
let dataarrq = ref([]);
const api = async () => {
  loding.value=true
 MessagePlugin.loading("正在加载中",0);
  const res1 = await getplat({
    category: "13",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  //图表
  const res0 = await getplatlist({
    category: "13",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  console.log(res0);
  Echart_1 = echarts.init(document.getElementById("chart_zhe"));
  const eacdata = {
    time: [],
    zl: [],
    fww: [],
    cprs: [],
    tjda: [],
    scrs: [],
  };
  res0.data[0].pvnum.forEach((item) => {
    eacdata.time.push(item.createtime);
    eacdata.zl.push(item.pvnum);
  });
  res0.data[0].uvnum.forEach((item) => {
    eacdata.fww.push(item.uvnum);
  });
 
  dataarrq.value = eacdata.tjda;
  acsi.value = dataarrq.value.slice(0, 6);
  let optionCS = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["浏览量", "访问人数" ],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "浏览量",
        type: "line",

        smooth: true,
        data: [],
      },
      {
        name: "访问人数",
        type: "line",

        smooth: true,
        data: [],
      },
      
    ],
  };
  optionCS.xAxis.data = eacdata.time;
  optionCS.series[0].data = eacdata.zl;
  optionCS.series[1].data = eacdata.fww;


  Echart_1.setOption(optionCS);
  zlzl.value = res1.data[0].pvnum;
  fwrs.value = res1.data[0].uvnum;

  sc.value = res1.data[0].scount;
  loding.value=false
  MessagePlugin.closeAll();
   MessagePlugin.success("加载成功");
};
let daflay = ref(true);
let stazt = ref("查看全部>");
//展开
const zhankai = async () => {
  daflay.value = !daflay.value;
  console.log(daflay.value);
  if (daflay.value) {
    stazt.value = "查看全部>";
    acsi.value = dataarrq.value.slice(0, 6);
  } else {
    stazt.value = "<收起全部";
    acsi.value = dataarrq.value;
  }
};
//重置
const cz = async () => {
  flay.value = true;
  if (flay.value) {
    checked1.value = false;
    checked2.value = true;
  } else {
    checked1.value = true;
    checked2.value = false;
  }
  options1.value = [
    {
      value: "1",
      label: "近7天",
    },
    {
      value: "2",
      label: "近30天",
    },
    {
      value: "3",
      label: "近90天",
    },
  ];
  value2.value = "2";
  loding.value=true
  MessagePlugin.loading("正在加载中");
  const res1 = await getplat({
    category: "13",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  const res0 = await getplatlist({
    category: "13",
    type: value2.value,
    starttime: "",
    endtime: "",
  });
  Echart_1 = echarts.init(document.getElementById("chart_zhe"));
  const eacdata = {
    time: [],
    zl: [],
    fww: [],
    cprs: [],
    tjda: [],
    scrs: [],
  };
  res0.data[0].pvnum.forEach((item) => {
    eacdata.time.push(item.createtime);
    eacdata.zl.push(item.pvnum);
  });
  res0.data[0].uvnum.forEach((item) => {
    eacdata.fww.push(item.uvnum);
  });
 
  dataarrq.value = eacdata.tjda;
  acsi.value = dataarrq.value.slice(0, 6);
  let optionCS = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["浏览量", "访问人数" ],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "浏览量",
        type: "line",

        smooth: true,
        data: [],
      },
      {
        name: "访问人数",
        type: "line",

        smooth: true,
        data: [],
      },
      
     
    ],
  };
  optionCS.xAxis.data = eacdata.time;
  optionCS.series[0].data = eacdata.zl;
  optionCS.series[1].data = eacdata.fww;


  Echart_1.setOption(optionCS);
  zlzl.value = res1.data[0].pvnum;
  fwrs.value = res1.data[0].uvnum;
  sc.value = res1.data[0].scount;
  loding.value=false
  MessagePlugin.closeAll();
  MessagePlugin.success("加载成功");
};
//查询
const cx = async () => {
  if (flay.value) {
  loding.value=true
    MessagePlugin.loading("正在查询中", 0);
    const res1 = await getplat({
      category: "13",
      type: value2.value,
      starttime: "",
      endtime: "",
    });
    const res0 = await getplatlist({
      category: "13",
      type: value2.value,
      starttime: "",
      endtime: "",
    });
    Echart_1 = echarts.init(document.getElementById("chart_zhe"));
    if (value1.value === 0 || value1.value === 1) {
      const eacdata = {
        time: [],
        zl: [],
        fww: [],
        cprs: [],
        tjda: [],
        scrs: [],
      };
      res0.data[0].pvnum.forEach((item) => {
        eacdata.time.push(item.createtime);
        eacdata.zl.push(item.pvnum);
      });
      res0.data[0].uvnum.forEach((item) => {
        eacdata.fww.push(item.uvnum);
      });
      let optionCS = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["浏览量", "访问人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "浏览量",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "访问人数",
            type: "line",

            smooth: true,
            data: [],
          },
       
        
        ],
      };
      optionCS.xAxis.data = eacdata.time;
      optionCS.series[0].data = eacdata.zl;
      optionCS.series[1].data = eacdata.fww;
    
      
      Echart_1.setOption(optionCS);
    } else if (value1.value === 2) {
      const eacdata = {
        time: [],
        zl: [],
        fww: [],
        cprs: [],
        tjda: [],
        scrs: [],
      };
      res0.data.forEach((item, index) => {
        eacdata.time.push(item.quarter);
        eacdata.zl.push(item.pvnum);
        eacdata.fww.push(item.uvnum);
        
      });
      let optionCS = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["浏览量", "访问人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "浏览量",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "访问人数",
            type: "line",

            smooth: true,
            data: [],
          },
          
        ],
      };
      optionCS.xAxis.data = eacdata.time;
      optionCS.series[0].data = eacdata.zl;
      optionCS.series[1].data = eacdata.fww;
    
      
      Echart_1.setOption(optionCS);
    } else if (value1.value === 3) {
      const eacdata = {
        time: [],
        zl: [],
        fww: [],
        cprs: [],
        tjda: [],
        scrs: [],
      };
      res0.data.forEach((item, index) => {
    
        eacdata.time.push(item.years);
        eacdata.zl.push(item.pvnum);
        eacdata.fww.push(item.uvnum);
      
       
      });
      let optionCS = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["浏览量", "访问人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "浏览量",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "访问人数",
            type: "line",

            smooth: true,
            data: [],
          },
          
        
        ],
      };
      optionCS.xAxis.data = eacdata.time;
      optionCS.series[0].data = eacdata.zl;
      optionCS.series[1].data = eacdata.fww;
    
      
      Echart_1.setOption(optionCS);
    }
  loding.value=false
    MessagePlugin.closeAll();
    MessagePlugin.success("查询成功");
    zlzl.value = res1.data[0].pvnum;
    fwrs.value = res1.data[0].uvnum;
    
    sc.value = res1.data[0].scount;
  } else {
  loding.value=true
    MessagePlugin.loading("正在查询中", 0);
    const res1 = await getplat({
      category: "13",
      type: "",
      starttime: riqi.value[0] + " 00:00:00",
      endtime: riqi.value[1] + " 00:00:00",
    });
    const res0 = await getplatlist({
      category: "13",
      type: "",
      starttime: riqi.value[0] + " 00:00:00",
      endtime: riqi.value[1] + " 00:00:00",
    });
    Echart_1 = echarts.init(document.getElementById("chart_zhe"));
    const eacdata = {
        time: [],
        zl: [],
        fww: [],
        cprs: [],
        tjda: [],
        scrs: [],
      };
      console.log(res0);
       res0.data[0].pvnum.reverse();
    res0.data[0].uvnum.reverse();
      res0.data[0].pvnum.forEach((item) => {
        eacdata.time.push(item.createtime);
        eacdata.zl.push(item.pvnum);
      });
      res0.data[0].uvnum.forEach((item) => {
        eacdata.fww.push(item.uvnum);
      });
   
     
      let optionCS = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["浏览量", "访问人数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "浏览量",
            type: "line",

            smooth: true,
            data: [],
          },
          {
            name: "访问人数",
            type: "line",

            smooth: true,
            data: [],
          },
       
        ],
      };
      optionCS.xAxis.data = eacdata.time;
      optionCS.series[0].data = eacdata.zl;
      optionCS.series[1].data = eacdata.fww;
    
      Echart_1.setOption(optionCS);
  loding.value=false
    MessagePlugin.closeAll();
    MessagePlugin.success("查询成功");
    zlzl.value = res1.data[0].pvnum;
    fwrs.value = res1.data[0].uvnum;
   
    sc.value = res1.data[0].scount;
  }
};
onMounted(() => {
  riqijs();
  api();
});
onUnmounted(() => {
    if(Echart_1.value!=null){
    Echart_1.dispose();
  }
   MessagePlugin.closeAll();
});
</script>

<style lang="scss" scoped>
.box {
  width: calc(100% - 30px);
  padding-left: 20px;
    .blaek{
    position: absolute;
    right: 0;
    top:0;
    z-index: 10;
    width: 85%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.5);
  }
  .top_box {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
  }
  .el-menu--horizontal {
    border-bottom: none;
  }
  .top_in {
    width: 100%;
    margin-left: 50px;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    .ingj {
      margin-left: 40px;
      .el-select {
        width: 100px !important;
        margin-right: 20px;
      }
    }
    .btn {
      width: 150px;
      height: 30px;
      justify-content: space-between;
      .el-button {
        width: 65px;
      }
    }
  }
  .zhuyao {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
    .el-select {
      width: 100px !important;
      margin-right: 20px;
    }
    .til {
      font-size: 18px;
      margin-left: 50px;
      text-indent: 5px;
    }
    .tilbox {
      width: 40%;
      height: 80px;
      margin-left: 60px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      .tiitem {
        width: 30%;
        height: 100%;
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        color: #409eff;
        .niuw {
          font-size: 14px;
          color: #000;
           font-weight: 500;
        }
        .wen {
          position: relative;
          width: 10px;
          height: 10px;
          line-height: 10px;
          text-indent: 5px;
          background: #409eff;
          text-align: center;
          border-radius: 50%;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          .hov {
            position: absolute;
            left: -34px;
            top: 24px;
            border-radius: 5px;
            padding-left: 20px;
            padding-right: 20px;
            width: 600px;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            color: #000;
            display: none;
            background: rgb(255, 233, 204);
          }
        }
        .wen:hover {
          .hov {
            display: block;
          }
        }
      }
    }
  }
  .each_title {
    border-left: 4px solid;
    border-image: linear-gradient(
        to bottom,
        rgb(124, 100, 199) 20%,
        rgb(59, 182, 254) 70%
      )
      1;
  }
  .eca {
    width: 95%;
    height: 450px;
    margin: auto;
    margin-top: 20px;
    div {
      width: 100%;
      height: 100%;
    }
  }
  .boxtj {
    margin: auto;
    margin-top: 15px;
    margin-left: 20px;
    display: flex;
    flex-flow: row wrap;
    gap: 15px;
    .zijibox {
      position: relative;
      width: 120px;
      height: 100px;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 10px;
      text-align: center;
      font-size: 33px;
      color: #409eff;
      border: solid 2px #000;
      .dhwid {
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
        font-weight: bold;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .xx {
        position: absolute;
        right: 10px;
        top: 9px;
      }
    }
    .zijibox1 {
      margin-top: 45px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
</style>
